<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作样式</title>
    <!--    引入jquery-->
    <script src="../../js/jquery-3.3.1.js"></script>
    <style>
        .mycss1 {
            font-size: 30px;
        }
        .mycss2 {
            border-bottom: blue solid 1px;
            color: green;
        }
    </style>

</head>
<body>
<div>
    <span>你好 jquery</span>
    <!-- 这是以前的常规方式 -->
<!--    <p class="mycss1 mycss2">人生是需要经历的、每个人都是一步步走过来的。我…正在路上。</p>-->
    <p>人生是需要经历的、每个人都是一步步走过来的。我…正在路上。</p>
</div>
<script>
    /**
     * 1.使用css方法来设置样式
     */
    $('span').css("color", "red").css("font-size", "50px")

    /**
     * 用jquery来添加样式
     */
    $('p').addClass("mycss1").addClass("mycss2")
    /**
     * 用jquery来移除样式
     */
    $('p').removeClass("mycss2")

    /**
     * toggleClass
     * 已经具有该class样式，就移除
     * 不具有，就添加
     */
    $('p').toggleClass("mycss1")

</script>
</body>
</html>